<template>
    <div ><el-row>
  <el-col :span="12"><div class="grid-content bg-purple"><el-button-group>
            <el-button @click="addUI" type="success" icon="el-icon-edit">添加</el-button>
            
            </el-button-group></div></el-col>
  <el-col :span="11"><div class="grid-content bg-purple-light">
    <el-input 
              placeholder="请输入内容"
              v-model="name"
              clearable>
            </el-input>
            </div></el-col>
  <el-col :span="1"><div class="grid-content bg-purple-light" style="float:left">
    <el-button @click="find()" type="success" icon="el-icon-search"></el-button>
  </div></el-col>
</el-row>
        
          <el-table   
            border
            style="width: 100%"
            :data="pagination.records"
            ref="userTable"
            >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column v-for="column in columns" :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width">
            </el-table-column>

            


         <!--操作列-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit( scope.row)">编辑</el-button>
                    
                    
                <el-popconfirm 
                    icon="el-icon-question"
                    icon-color="red"
                    title="是否确定删除该记录？"
                    @confirm="handleDelete(scope.row)"
                    >
                  <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
                </template>
                </el-table-column>

        </el-table>

        <!--分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-sizes="[2,3,4,5]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>

        <!--添加-->
        <el-dialog title="添加商品信息" :visible.sync="addTag" 
        :close-on-click-modal="false" top="10px">
            <el-form label-width="100px">
                <el-form-item label="客户名称"  >
                   <el-input v-model="client.clientname" autocomplete="off"></el-input>
                </el-form-item> 

                <el-form-item label="联系人"  >
                    <el-input v-model="client.contacts" autocomplete="off"></el-input>
                </el-form-item> 

                <el-form-item label="联系电话"  >
                  <el-input v-model="client.phoneNum" autocomplete="off"></el-input>
                </el-form-item> 
                
                   <el-form-item label="累计应收"  >
                   <el-input v-model="client.allNeedGet" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addTag = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
            </el-dialog>

             <!--修改-->
        <el-dialog title="修改商品信息" :visible.sync="updateTag" 
        :close-on-click-modal="false" top="10px">
            <el-form label-width="100px">
                <el-form-item label="客户名称"  >
                   <el-input v-model="client.clientname" autocomplete="off"></el-input>
                </el-form-item> 

                <el-form-item label="联系人"  >
                    <el-input v-model="client.contacts" autocomplete="off"></el-input>
                </el-form-item> 

                <el-form-item label="联系电话"  >
                  <el-input v-model="client.phoneNum" autocomplete="off"></el-input>
                </el-form-item> 
                
                   <el-form-item label="累计应收"  >
                   <el-input v-model="client.allNeedGet" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateTag = false">取 消</el-button>
                <el-button type="primary" @click="update()">确 定</el-button>
            </div>
            </el-dialog>
             
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
          options:[],
          columns:[
             {prop:'clientid',label:'编号',width:'100'},
              {prop:'clientname',label:'客户名称',width:'250'},
              {prop:'contacts',label:'联系人',width:'100'},
              {prop:'phoneNum',label:'联系电话',width:'250'},
              {prop:'allNeedGet',label:'累计应收',width:'250'},
          ],
         pagination:{},
         client:{},
         addTag:false,
         name:'',
         updateTag:false,
        }
    },
    components: {},
    methods: {
    find(page=1,size=3){
          let url="/client/findPages";
          let params=new URLSearchParams();
          params.append("current",page);
          params.append("size",size)
          this.$axios.post(url,params).then(resp=>{
               this.pagination=resp.data;
          });
      },
      //删除
      handleDelete(row){
        //异步删除
        console.log(row.clientid);
        var url="client/clientDelete";  
        var params=new URLSearchParams();
        params.append("id",row.clientid);
        this.$axios.post(url,params).then(resp=>{
            this.$message({
              message:"删除成功:"+row.clientid
          })
        });
        this.find();
      },
      //修改
      handleEdit(row){
               this.updateTag=true;
                this.client=row;
                console.log(row);
      },
      handleSizeChange(size){
             this.find(this.pagination.current,size);
      },
      handleCurrentChange(page){
         this.find(page,this.pagination.size);
      },
      addUI(){
          this.addTag=true;
      },
      add(){
          var url="/client/clientSave";
          this.$axios.post(url,this.client).then(resp=>{
               this.addTag=false;
               this.client={};
               this.$message({
                   message:"添加成功",
                   type:'success'
               })
          });
          this.find();
      },
      update(){
          var url="/client/clientUpdate";
          this.$axios.post(url,this.client).then(resp=>{
            this.client={};
            this.updateTag=false;
            this.$message({
              message:"修改成功",
              type:'success'
            })
          });
      }
      
    },
    mounted() {
        this.find();
    },
}
</script>

<style  scoped>
.avatar-uploader-icon, .avatar {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon:hover, .avatar:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>